Home/Feed #655

intergalacticspacehighway · 2022-01-05T07:04:01Z

Why

This PR adds Home/Feed Screen

How

Added Tabs.
Infinite query is a custom one. I am facing issues with swr which leads to layout shifts on pull to refresh. I'll be experimenting with it. Thought to make a PR for early feedback as it was taking longer and the custom hook interface will remain the same, so won't affect when we switch to swr.

Test Plan

Run the expo app on iOS and Android.
Try changing tabs/scroll to bottom and pull to refresh.

vercel · 2022-01-05T07:04:34Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/showtime/showtime/7xYTw5Nh1xSogtr21YNrTtmXnqKu
✅ Preview: https://showtime-git-feed-showtime.vercel.app

intergalacticspacehighway · 2022-01-05T07:05:25Z

packages/app/components/feed.tsx

-      const footerHeight = 0;
+  const listRef = useRef(null);
+
+  useScrollToTop(listRef);


This hook from react navigation enables scroll to top on bottom tab press

intergalacticspacehighway · 2022-01-05T07:08:06Z

packages/app/components/feed.tsx


-      return {


Had to remove the getItemLayout as component heights cannot be determined by images since we have activity and social cards which can be dynamic (let me know if it's possible though). Haven't seen any major performance issue by removing this. We're memoizing cards in FlatList.

intergalacticspacehighway · 2022-01-05T07:09:07Z

packages/app/hooks/service-hooks.ts

+// import useSWRInfinite from "swr/infinite";
+// import { useInfiniteListQuery } from "./use-infinite-list-query";
+
+// export const useActivity = ({


Kept this commented for now. It's swr implementation of the hook. I'll be working on it. This works but leads to layout shift on pull to refresh

intergalacticspacehighway · 2022-01-05T07:11:05Z

packages/app/hooks/use-infinite-list-query.ts

@@ -0,0 +1,55 @@
+import { useState, useRef } from "react";
+
+export const useInfiniteListQuery = (fetcher) => {


Cool hook but will be replaced by swr implementation once I figure out the issue.

intergalacticspacehighway · 2022-01-05T07:11:25Z

packages/app/screens/home.tsx


 const HomeScreen = () => {
-  const { user } = useUser();
-  const userId = user?.data?.profile?.profile_id;
-  const { data, size, setSize, mutate } = useSWRInfinite(


Moved API hooks closer to the component.

github-actions · 2022-01-05T07:11:40Z

PR Preview - Storybook

This pull request preview deployment is now available.

✅ Preview: io.showtime.storybook://expo-development-client/?url=https://exp.host/@tryshowtime/showtime-storybook-react-native/index.exp?release-channel=pr-655&sdkVersion=44.0.0

Comment ID: 1005436158

intergalacticspacehighway · 2022-01-05T07:13:58Z

packages/app/components/feed.tsx

+      onRefresh={refresh}
+      onEndReached={fetchMore}
+      ref={listRef}
+      onEndReachedThreshold={0.6}


I think 0.6 setting works well! Let me know if this needs to be changed

github-actions · 2022-01-05T07:16:18Z

PR Preview - Storybook on Chromatic

✅ Preview: The Storybook preview URL for this Pull Request

✅ Build: The Chromatic build URL for this Pull Request

github-actions · 2022-01-05T07:27:12Z

PR Preview - App

This pull request preview deployment is now available.

✅ Preview: io.showtime.development://expo-development-client/?url=https://exp.host/@tryshowtime/showtime/index.exp?release-channel=pr-655&sdkVersion=44.0.0

Comment ID:

axeldelafosse

LGTM ✨ Love to see how we improve the design system as we work on screens.

axeldelafosse · 2022-01-05T08:42:04Z

packages/design-system/image/index.tsx

@@ -13,7 +13,8 @@ import type { TW } from "design-system/tailwind/types";
 function Img({ source, width, height, ...props }: ReactNativeImageProps) {
  return (
    <ReactNativeImage
-      source={source}
+      // @ts-ignore
+      source={source.uri ? { uri: source.uri, cache: "force-cache" } : source}


axeldelafosse · 2022-01-05T08:56:44Z

Def not a blocker but I just found that the "pinch to dezoom" (the reverse action) is acting weird haha. Also I know this is expected but it's weird that when swiping between tabs it displays the "Home" header again (if it was hidden) -- it's creating a layout shift.

intergalacticspacehighway · 2022-01-05T08:59:16Z

Def not a blocker but I just found that the "pinch to dezoom" (the reverse action) is acting weird haha. Also I know this is expected but it's weird that when swiping between tabs it displays the "Home" header again (if it was hidden) -- it's creating a layout shift.

good catch! will fix it in next PR

* upgrade mmkv * Home/Feed (#655) * feed tabs * pinch to zoom * pinch to zoom * pinch to zoom * pinch to zoom * fix: feed ptr * fix: feed images * fix: feed images * wip: feed * wip: feed * wip: feed * wip - feed * wip - feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * wip: feed * upgrade mmkv * use correct app scheme and icon for walletconnect * improve walletconnect implementation * automatically submit when wallet is connected * Adjust gas price by a percentage (#653) * create video component * Feature/show2 290 trending screen (#663) * wip: trending * wip: trending * wip: trending * wip: trending * make api fast again * optimise creator previre * optimise creator preview * optimise creator preview * optimise creator preview * Update to handle long collection names (#662) * Enable Magic on minting & marketplace (#665) * install three.js + upgrade to react 18 + patch packages * add model component * Misc fixes (#666) * spinner fix * spinner fix * add swr * add swr * add swr * initial scroll fix * add accessToken hook (#667) * fix: added `useAccessToken` to access token for web (#669) * feat(SHOW2-225): refactor modal component (#652) * refactor: updated the modal styling for web * fix: fixed tailwind colors import * refactor: updated the modal styling for mobile * chore: reset modal storybook visibility * refactor: removed index.web * fix: fixed the modal body styling on mobile * refactor: updated modal styling for web/ios * fix: modal gestures components on Android Co-authored-by: Axel Delafosse <[email protected]> * list improvements (#671) * list improvements * list improvements * list improvements * list improvements * list improvements * list improvements * list improvements * render model as image for now * mark svg as todo * mark blurhash as todo on android * update logo * add nft title and description components * clean code * Update styles and semantics for listed for per feedback (#660) * disable save changes button when username is not available (#674) * use suspense + add types + add navigation elements context and hook to hide * improve collection component * add send icon * add comments + message box * use constants for scroll and padding height * clean code * chore(magic): add magic flag in useFlags and import them into modals (#675) * Profile screen (#677) * add flipper * add flipper * inti * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * enable double tap * list improvements * list improvements * wip profile * wip profile * profile api * profile wip * profile wip * profile wip * profile wip * profile wip * profile wip * profile wip * wip profile * wip profile * wip profile * wip profile * wip profile * wip profile * profile change route param * add react navigation to storybook RN * add react navigation to storybook RN * add react navigation to storybook RN * add react navigation to storybook RN * add camera * add reanimated handler to pager (#678) * add reanimated handler to pager * add reanimated handler to pager * new tabs * Revert "new tabs" This reverts commit b88ae0b. * upgrade vision-camera * add create modal * clean code * refactor: updated tabs item header width to be dynamic (#681) * update dependencies * upgrade deps and revert yarn.lock changes * use text-13 for tab items * render svg via xml + disabled press on media if in nft modal * fix camera tab bar icon container size * set trending tabs to full width screen * use suspense for profile tabs * clean header dropdown * Show an error when username is too short * set user color scheme * update status bar * fix imports * Feature/show2 309 create (#688) * fieldset * wip create UI * wip create UI * wip create UI * wip create UI * remove animated view from header (#692) * use media component everywhere * use the modal component for the create screen * fix: color mode re-renders * fix: color mode re-renders * fix: color mode re-renders * feat(SHOW2-283): added login with SMS flow and refactor login styling (#672) * fix: updated the button height based on design system * refactor: updated login screen styling * feat: added keyboard handling for iOS & Android * refactor: extracted email field ui into a separate component * feat: added phone number field * refactor: added contact details and remove email and phone number components * feat: added loading view * chore: removed debug console logs * fix: set loading state on phone number submitting * refactor: extract root magic instance * refactor: updated tabs header item indicator positioning * refactor: added a generic input field * refactor: extracted login container and header * refactor: updated login design to follow design system * fix: prevent tab header from setting invalid height * refactor: added text content type to input field * fix: logout customer when app fails to login * fix(unlist): allow an item to be unlisted by the owner when it not the lowest item for sale (#683) * Resolve an issue with next.js caching user profiles to a 404 (#680) (#698) Co-authored-by: Axel Delafosse <[email protected]> * rework explore page for marketplace (#700) * rework explore page for marketplace * fix mobile links * fix feed button tracking events Co-authored-by: Axel Delafosse <[email protected]> Co-authored-by: Nishan <[email protected]> Co-authored-by: Axel Delafosse <[email protected]> Co-authored-by: Miguel Piedrafita <[email protected]> Co-authored-by: Mo Gorhom <[email protected]> Co-authored-by: Henry Fontanier <[email protected]>

intergalacticspacehighway added 26 commits December 28, 2021 23:15

feed tabs

d6f364e

pinch to zoom

c2aebe1

pinch to zoom

8c4cc7c

pinch to zoom

4031a37

pinch to zoom

e0306d4

fix: feed ptr

96276c9

fix: feed images

1e84601

fix: feed images

5096d01

wip: feed

d599fd1

wip: feed

87c0178

wip: feed

f30e02e

wip - feed

ba1f9d2

wip - feed

52d4f7a

wip: feed

cd2a314

wip: feed

cff9a55

wip: feed

845269f

wip: feed

47fe6e6

wip: feed

1288f8b

wip: feed

7916b58

wip: feed

7011559

wip: feed

691dcc1

wip: feed

e5dbab5

wip: feed

3f72d31

wip: feed

7b261d6

wip: feed

9b2e067

wip: feed

fc235f3

vercel bot deployed to Preview January 5, 2022 07:04 View deployment

intergalacticspacehighway commented Jan 5, 2022

View reviewed changes

wip: feed

32f3bde

vercel bot deployed to Preview January 5, 2022 07:12 View deployment

intergalacticspacehighway marked this pull request as ready for review January 5, 2022 07:13

intergalacticspacehighway requested review from axeldelafosse, fontanierh and gorhom and removed request for axeldelafosse January 5, 2022 07:13

intergalacticspacehighway commented Jan 5, 2022

View reviewed changes

axeldelafosse approved these changes Jan 5, 2022

View reviewed changes

intergalacticspacehighway merged commit 0cab622 into staging Jan 5, 2022

intergalacticspacehighway deleted the feed branch January 5, 2022 08:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Home/Feed #655

Home/Feed #655

intergalacticspacehighway commented Jan 5, 2022 •

edited

Loading

vercel bot commented Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022

intergalacticspacehighway Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022

intergalacticspacehighway Jan 5, 2022

github-actions bot commented Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022

github-actions bot commented Jan 5, 2022

github-actions bot commented Jan 5, 2022

axeldelafosse left a comment

axeldelafosse Jan 5, 2022

axeldelafosse commented Jan 5, 2022

intergalacticspacehighway commented Jan 5, 2022

		@@ -0,0 +1,55 @@
		import { useState, useRef } from "react";

		export const useInfiniteListQuery = (fetcher) => {

Home/Feed #655

Home/Feed #655

Conversation

intergalacticspacehighway commented Jan 5, 2022 • edited Loading

Why

How

Test Plan

vercel bot commented Jan 5, 2022 • edited Loading

intergalacticspacehighway Jan 5, 2022

Choose a reason for hiding this comment

intergalacticspacehighway Jan 5, 2022 • edited Loading

Choose a reason for hiding this comment

intergalacticspacehighway Jan 5, 2022 • edited Loading

Choose a reason for hiding this comment

intergalacticspacehighway Jan 5, 2022

Choose a reason for hiding this comment

intergalacticspacehighway Jan 5, 2022

Choose a reason for hiding this comment

github-actions bot commented Jan 5, 2022 • edited Loading

PR Preview - Storybook

intergalacticspacehighway Jan 5, 2022

Choose a reason for hiding this comment

github-actions bot commented Jan 5, 2022

PR Preview - Storybook on Chromatic

github-actions bot commented Jan 5, 2022

PR Preview - App

axeldelafosse left a comment

Choose a reason for hiding this comment

axeldelafosse Jan 5, 2022

Choose a reason for hiding this comment

axeldelafosse commented Jan 5, 2022

intergalacticspacehighway commented Jan 5, 2022

intergalacticspacehighway commented Jan 5, 2022 •

edited

Loading

vercel bot commented Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022 •

edited

Loading

intergalacticspacehighway Jan 5, 2022 •

edited

Loading

github-actions bot commented Jan 5, 2022 •

edited

Loading